<template>
    <div class="back-header-main">
        <div class="l" @click="goBack()">
            <i class="el-icon-back"></i>
            <span class="title">返回</span>
        </div>
        <div class="content">{{ content }}</div>
    </div>
</template>
  
<script>
export default {
    name: "x-back-header",
    data() {
        return {
        };
    },
    props: {
        content: {
            type: String,
            required: true
        },
        routePath: {
            type: String,
            required: true
        }
    },
    mounted() {
    },
    methods: {
        goBack() {
            console.log(this.routePath);
            this.$router.push({path:this.routePath})
        }
    }
}
</script>

<style scoped lang="less">
.back-header-main {
    display: flex;
    justify-content: flex-start;
    line-height: 22px;
    font-size: 14px;
    padding: 15px;

    .l {
        padding-right: 15px;
        border-right: 1px solid #DCDFE6;

        span {
            margin-left: 5px;
        }
    }

    .l:hover {
        cursor: pointer;
    }

    .content {
        padding: 0 15px;
    }

}</style>